<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center detail_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub detail_fd0_0'>
          <view class='flex flex-wrap align-center detail_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  detail_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
          </view>
          <view class='flex flex-wrap align-center justify-end detail_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout detail_flex_1"
        @tap.stop="popupShow1721114509254=true">
        <view class='flex flex-direction flex-wrap align-stretch detail_fd1_0'>
          <view class='flex flex-direction flex-wrap align-stretch'>
            <view class='flex flex-wrap align-center justify-between' @click.stop="goHome">
              <view class='flex flex-wrap align-center'>
                <image class='detail_fd1_0_c0_c0_c0_c0' mode="aspectFit" :src='user_info.avatar'></image>
                <view class='flex flex-direction flex-wrap align-stretch'>
                  <text class='detail_fd1_0_c0_c0_c0_c1_c0'>{{user_info.nickname}}</text>
                  <view class='flex flex-wrap align-center detail_fd1_0_c0_c0_c0_c1_c1'>
                    <text>粉丝 {{user_info.follow_num }}</text>
                    <text class='detail_fd1_0_c0_c0_c0_c1_c1_c1'>发布 {{user_info.fabushu}}</text>
                  </view>
                </view>
              </view>
              <button class='detail_fd1_0_c0_c0_c1'
                @click.stop="collectUser(user_info)">{{user_info.is_follow ==0 ? '+ 关注' : '已关注'}}
              </button>
            </view>
            <view class='flex flex-wrap align-center justify-between detail_fd1_0_c0_c1'>
              <view class='flex flex-wrap align-center'>
                <text class='detail_fd1_0_c0_c1_c0_c0'>{{messageInfo.exhibition_name}}</text>
                <text
                  class='detail_fd1_0_c0_c1_c0_c1'>{{messageInfo.freetransactionclassification_classificationname}}</text>
              </view>
              <view class='flex flex-wrap align-center detail_fd1_0_c0_c1_c1'>
                <text v-if="messageInfo.exhibition==1">可议价</text>
                <text class='detail_fd1_0_c0_c1_c1_c1'>{{messageInfo.viewcount}} 浏览</text>
              </view>
            </view>
            <view class='flex align-center taabs'>
              <view class="taabsItem" v-for="(item,index) in messageInfo.label" :key="index">{{item}}</view>
            </view>
            <view class='detail_fd1_0_c0_c0_c0_c1_c0'>{{messageInfo.title}}</view>
            <view class='detail_fd1_0_c0_c3'>{{messageInfo.content}}</view>
          </view>
        </view>
        <view style="position: relative">
          <swiper ref="benbenSwiperfd1_1" @change="bannerIndexfd1_1 = $event.detail.current"
            class='flex position-relative detail_fd1_1' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>


            <swiper-item class='flex  detail_fd1_1_c1' v-for="(item,index) in messageInfo.picture"
              @click.stop="previImage(messageInfo.picture,index)">
              <image class='detail_fd1_1' mode="aspectFill" :src='item'></image>
            </swiper-item>


          </swiper>
          <view style="position: absolute" class="flex dot flex align-center justify-center detail_swiperDotfd1_1">
            <template v-for="(item, index) in (1)">
              <view :key="index" v-if="bannerIndexfd1_1 == index"
                class="flex dot selected flex align-center justify-center detail_swiperDotSelectedfd1_1">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center detail_swiperDotUnselectedfd1_1">
              </view>
            </template>
          </view>
        </view>
        <view class='flex flex-wrap align-center detail_fd1_0'>
          <text class='detail_fd1_0_c0_c1_c1'>最后编辑日期 {{messageInfo.update_time }}</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1721116371010" :mask="true" :mask-close-able="false" mode='center'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center detail_flex_2">
          <text class='detail_fd2_0'>提示</text>
          <text class='detail_fd2_1'>确定要删除这条帖子？该操作不可恢复。</text>
          <view class='flex flex-wrap align-center detail_fd2_2'>
            <button class='detail_fd2_2_c0' @click.stop="popupShow1721116371010=false">取消</button>
            <button class='detail_fd2_2_c1' @click.stop="delPost">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1721116371010ss" :mask="true" :mask-close-able="false" mode='center'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center detail_flex_2">
          <text class='detail_fd2_0'>提示</text>
          <text class='detail_fd2_1'>确定要删除这条留言吗？该操作不可恢复。</text>
          <view class='flex flex-wrap align-center detail_fd2_2'>
            <button class='detail_fd2_2_c0' @click.stop="popupShow1721116371010ss=false">取消</button>
            <button class='detail_fd2_2_c1' @click.stop="delPing">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout detail_flex_3"
        v-if="messageInfo.list.length">
        <text class='detail_fd3_0'>他发布的其他内容</text>

        <scroll-view class='detail_fd3_1' :scroll-x='true'>
          <view class='flex benben-scroll flex align-center'>
            <view class='flex flex-direction align-stretch detail_fd3_1_c0' @click.stop="goInto(item)"
              v-for="(item,index) in messageInfo.list">
              <image class='detail_fd3_1_c0_c0' mode="aspectFill" :src='item.picture[0]'></image>
              <text class='detail_fd3_1_c0_c1'>{{item.title}}</text>
              <text class='detail_fd3_1_c0_c2'>{{item.exhibition_name}}</text>
            </view>
          </view>
        </scroll-view>

      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout detail_flex_4"
        @click.stop="popupShow1721116071425=true">
        <text class='detail_fd4_0'>{{messageInfo.numberofcomments}}条留言</text>
        <view class="detail_fd4_1 text-999 ">感兴趣就留言吧</view>
        <!-- <benben-input class='detail_fd4_1' type="text" :placeholder="`感兴趣就留言吧`" confirm-type="done" :maxlength="-1"
          :adjust-position="false" :disabled='true' placeholder-style="color:#999;font-size:28rpx" /> -->
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1721116648953" :mask="true" :mask-close-able="true" mode='bottom' :z-index='999'>
        <!---佣金说明弹窗flex布局开始-->
        <view class="flex flex-direction align-stretch benben-flex-layout detail_flex_5">
          <view class='flex flex-wrap align-center justify-center detail_fd5_0'>
            <text class='detail_fd5_0_c0'>设置可见范围</text>
          </view>
          <view class='flex flex-wrap align-center justify-between detail_fd5_1'>
            <text class='detail_fd5_1_c0'>仅自己</text>
            <view class='flex flex-wrap align-center'>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"16.png"'></image>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"37.png"'></image>
            </view>
          </view>
          <view class='flex flex-wrap align-center justify-between detail_fd5_1'>
            <text class='detail_fd5_1_c0'>部分互关好友可见</text>
            <view class='flex flex-wrap align-center'>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"16.png"'></image>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"37.png"'></image>
            </view>
          </view>
          <view class='flex flex-direction align-stretch detail_fd5_3'>
            <button class='detail_fd5_3_c0'>选择好友</button>
            <text class='detail_fd5_3_c1'>已选中好友5</text>
          </view>
          <!-- <view class='flex flex-wrap align-center justify-between detail_fd5_1'>
            <text class='detail_fd5_1_c0'>提醒TA看</text>
            <view class='flex flex-wrap align-center'>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"16.png"'></image>
              <image class='detail_fd5_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"37.png"'></image>
            </view>
          </view> -->
        </view>

        <!---佣金说明弹窗flex布局结束-->

      </benben-popup>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout detail_flex_6">
        <view class='flex flex-direction align-stretch'>
          <template v-for='(item,key0) in dataList'>
            <view class='flex flex-wrap align-start detail_fd6_0_c0' :key='key0'>
              <image class='detail_fd6_0_c0_c0' mode="aspectFit" :src='item.user_avatar'></image>
              <view class='flex flex-direction align-stretch flex-sub'>
                <view class='flex flex-wrap align-center justify-between'>
                  <text class='detail_fd6_0_c0_c1_c0_c0'>{{item.user_nickname}}</text>
                  <text class='detail_fd6_0_c0_c1_c0_c1' @click.stop="delPingItem(item)"
                    v-if="isLogin && (userInfo.id==item.user_id)">删除</text>
                </view>
                <view class='flex flex-direction flex-wrap align-stretch detail_fd6_0_c0_c1_c1'>
                  <view>
                    <text class='detail_fd6_0_c0_c1_c1_c0_c0'>{{item.commentcontent}}</text>
                    <!-- <text class='detail_fd6_0_c0_c1_c1_c0_c1'>{{item.create_time}}</text> -->
                  </view>
                  <text class='detail_fd6_0_c0_c1_c1_c0_c1'>{{item.create_time}}</text>
                </view>
                <!-- <template v-for='(child,key1) in item.replay'>
                  <view class='flex flex-wrap align-center detail_fd6_0_c0_c1_c2' v-if="key1<=0&&openId!=item.aid"
                    :key='key1'>
                    <image class='detail_fd6_0_c0_c1_c2_c0' mode="aspectFit" :src='child.avatar'></image>
                    <view class='flex flex-direction align-stretch flex-sub'>
                      <view class='flex flex-wrap align-center justify-between detail_fd6_0_c0_c1_c2_c1_c0'>
                        <view class='flex flex-wrap align-center'>
                          <text class='detail_fd6_0_c0_c1_c0_c0'>{{child.nickname}}</text>
                        </view>
                        <text class='detail_fd6_0_c0_c1_c0_c1' @click.stop="delPingItem(item)">删除</text>
                      </view>
                      <view>
                        <text class='detail_fd6_0_c0_c1_c1_c0_c0'>{{child.content}}</text>
                        <text class='detail_fd6_0_c0_c1_c1_c0_c1'>{{child.create_time}}</text>
                      </view>
                    </view>
                  </view>
                </template> -->
                <!-- <text class='detail_fd6_0_c0_c1_c3' v-if=" item.comment_reply_list.length>'1'"
                  @tap.stop="openMoreFunc(item.aid)">展开更多回复</text> -->
              </view>
            </view>
          </template>
          <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
            :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1721116071425" :mask="true" :mask-close-able="true" mode='bottom' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction align-stretch benben-flex-layout detail_flex_7">
          <view class='flex flex-wrap align-center justify-between detail_fd7_0'>
            <text>留言</text>
            <button class='detail_fd7_0_c1' @click.stop="sendCommentFunc">发送</button>
          </view>
          <view class='flex flex-wrap detail_fd7_1'>
            <benben-textarea class='flex detail_input_fd7_1' confirm-type="done" :placeholder="'请输入'" :maxlength="240"
              placeholder-style="color:#999;font-size:28rpx" v-model="fd7_1" />

          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex detail_flex_8"
        :style="{height:(120+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }" v-if="isLogin">
        <view class='flex flex-wrap align-center justify-between detail_fd8_0'
          v-if="isLogin && (userInfo.id!=messageInfo.user_id)">
          <view class='flex flex-direction align-center self-center justify-center' @click.stop="like">
            <image class='detail_fd8_0_c0_c0' mode="aspectFill" v-if="!messageInfo.is_thumbs"
              :src='STATIC_URL+"171.png"'></image>
            <image class='detail_fd8_0_c0_c0' mode="aspectFill" v-if="messageInfo.is_thumbs"
              :src='STATIC_URL+"200.png"'></image>
            <text>{{messageInfo.likes}}</text>
          </view>
          <view class='flex flex-direction align-center self-center justify-center' @click.stop="collection">
            <image class='detail_fd8_0_c0_c0' mode="aspectFill" v-if="!messageInfo.is_collection"
              :src='STATIC_URL+"172.png"'>
            </image>
            <image class='detail_fd8_0_c0_c0' mode="aspectFill" v-if="messageInfo.is_collection"
              :src='STATIC_URL+"201.png"'>
            </image>
            <text>{{messageInfo.numberofcollections}}</text>
          </view>
        </view>
        <button class='detail_fd8_1' @click.stop="gochat"
          v-if="isLogin && (userInfo.id!=messageInfo.user_id)">私聊</button>

        <view class='flex flex-wrap align-center justify-end flex-sub'
          v-if="isLogin && (userInfo.id==messageInfo.user_id)">
          <button class='detail_fd8_2_c0' @tap.stop="popupShow1721116371010=true">删除动态</button>
          <button class='detail_fd8_2_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/homePage/publishupdates/publishupdates?aid=${aid}`">编辑动态</button>
        </view>

      </view>
      <view :style="{height: (120+bottomSafeAreaRpx)+'rpx'}"></view>


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    TUIConversationService
  } from '@tencentcloud/chat-uikit-engine';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "fd7_1": "",
        "popupShow1721116071425": false,
        "popupShow1721116648953": false,
        "popupShow1721116371010": false,
        "bannerIndexfd1_1": 0,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "messageInfo": null,
        "relpName": "",
        "content": "",
        "commentId": "",
        "tabs": "1",
        "praiseAndCollectList": [],
        "commentList": [],
        "commentLike": {
          "is_like": ""
        },
        "openId": "",
        "attentionRes": {
          "is_follow": ""
        },
        "aid": "",
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        dataList: [],
        popupShow1721116371010ss: false,
        delAid: '',
        user_info: {
          avatar: '',
          fabushu: 0,
          follow_num: 0,
          is_follow: false,
          nickname: "",
          user_id: 0
        }
      };
    },
    computed: {
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      this.getMessageInfoFunc()
      this.getData()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      gochat(item) {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        console.log('iii', item)
        TUIConversationService.switchConversation(`C2C${this.messageInfo.user_id}`)
        uni.navigateTo({
          url: "/TUIKit/components/TUIChat/index"
        })
      },
      goHome() {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        uni.navigateTo({
          url: `/pages/grzx/userhome/userhome?aid=${this.messageInfo.user_id}`
        })
      },
      previImage(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      goInto(item) {
        this.aid = item.aid
        this.getMessageInfoFunc()
        this.getData()
      },
      // post6698e1b58a8c9
      getData() {
        this.minixPagingListsApi = global.apiUrls.post6698e1b58a8c9;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          freetransactionlist_id: this.aid
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },

      collectUser() {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        this.$api.post(global.apiUrls.post669b1d0232445, {
          user_id: this.user_info.user_id
        }).then(res => {
          if (res.data.code == 1) {
            if (this.user_info.is_follow == 0) {
              this.user_info.is_follow = 1
            } else {
              this.user_info.is_follow = 0
            }
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      //获取帖子信息
      async getMessageInfoFunc() {
        //请求方法
        //数据验证

        let datamessageInfo = await this.$api.post(global.apiUrls.post6698cc179ee27, {
          aid: this.aid,
          user_id: this.userInfo.id
        });

        if (datamessageInfo.data.code != 1) {
          this.$message.info(datamessageInfo.data.msg);
          return
        }
        let infomessageInfo = datamessageInfo.data;
        this.messageInfo = infomessageInfo.data
        this.user_info = this.messageInfo.user_info


      },
      // 删除评论
      delPingItem(item) {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        this.delAid = item.aid
        this.popupShow1721116371010ss = true
      },
      delPing() {
        this.$api.post(global.apiUrls.post6698e1f7c9e42, {
          aid: this.delAid
        }).then(res => {
          this.popupShow1721116371010ss = false
          if (res.data.code == 1) {
            this.getMessageInfoFunc()
            this.getData()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      // 删除
      delPost() {
        this.$api.post(global.apiUrls.post669b5102b4953, {
          aid: this.messageInfo.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.popupShow1721116371010 = false
            uni.navigateBack()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      //发表评价
      async sendCommentFunc() {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        if (!validate(this.fd7_1, 'require')) {
          this.$message.info('请输入评论内容');
          return false;
        }
        let data6444ce07ca0ab = await this.$api.post(global.apiUrls.post6698e0c20d64a, {
          freetransactionlist_id: this.messageInfo.aid,
          commentcontent: this.fd7_1
        });

        if (data6444ce07ca0ab.data.code != 1) {
          this.$message.info(data6444ce07ca0ab.data.msg);
          return
        }
        this.popupShow1721116071425 = false
        let info6444ce07ca0ab = data6444ce07ca0ab.data;
        this.fd7_1 = ''
        this.getMessageInfoFunc()
        this.getData()

      },

      //点击回复
      clickReplyFunc(name, id) {
        this.relpName = name;
        this.commentId = id;
      },
      //展开更多
      openMoreFunc(id) {
        this.openId = id;
      },
      like() {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        this.$api.post(global.apiUrls.post669b27c46794a, {
          goods_id: this.messageInfo.aid
        }).then(res => {
          if (res.data.code == 1) {
            if (this.messageInfo.is_thumbs) {
              this.messageInfo.is_thumbs = false
              this.messageInfo.likes = this.messageInfo.likes - 1
            } else {
              this.messageInfo.is_thumbs = true
              this.messageInfo.likes = this.messageInfo.likes + 1
            }
          }
        })
      },
      collection() {
        if (!this.isLogin) {
          this.$message.info('未登录 请前往登录')
          setTimeout(res => {
            uni.navigateTo({
              url: `/pages/tabBar/loginPage/loginPage`
            })
          }, 800)
          return
        }
        this.$api.post(global.apiUrls.post636caf10164ce, {
          goods_id: this.messageInfo.aid
        }).then(res => {
          if (res.data.code == 1) {
            if (this.messageInfo.is_collection) {
              this.messageInfo.is_collection = false
              this.messageInfo.numberofcollections = this.messageInfo.numberofcollections - 1
            } else {
              this.messageInfo.is_collection = true
              this.messageInfo.numberofcollections = this.messageInfo.numberofcollections + 1
            }
          }
        })
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .taabs {
    .taabsItem {
      padding: 8rpx 12rpx;
      border: 2rpx solid #5A5CFC;
      border-radius: 8rpx;
      font-size: 22rpx;
      margin: 0 16rpx 16rpx 0;
      color: #5A5CFC;
    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .detail_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .detail_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .detail_fd0_0_c0 {
    width: 120rpx;
  }

  .detail_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .detail_flex_1 {
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .detail_numberfd1_1_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .detail_fd1_1_c1 {
    width: 750rpx;
    height: 300rpx;
  }

  .detail_fd1_1 {
    width: 750rpx;
    height: 750rpx;
  }

  .detail_swiperDotUnselectedfd1_1 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .detail_swiperDotSelectedfd1_1 {
    background: var(--benbenbgColor1);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .detail_swiperDotfd1_1 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .detail_fd1_0_c0_c3 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd1_0_c0_c1_c1_c1 {
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .detail_fd1_0_c0_c1_c1 {
    color: var(--benbenFontColor2);
    font-size: 24rpx;
  }

  .detail_fd1_0_c0_c1_c0_c1 {
    background: rgba(90, 92, 252, 1);
    font-size: 22rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
    padding: 0 10rpx 0 10rpx;
    height: 36rpx;
    line-height: 36rpx;
    color: var(--benbenFontColor3);
    background-size: 100% auto;
    border-radius: 8rpx;
  }

  .detail_fd1_0_c0_c1_c0_c0 {
    color: rgba(255, 72, 59, 1);
  }

  .detail_fd1_0_c0_c1 {
    margin: 32rpx 0rpx 16rpx 0rpx;
  }

  .detail_fd1_0_c0_c0_c1 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 144rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    color: #fff;
    height: 56rpx;
  }

  .detail_fd1_0_c0_c0_c0_c1_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .detail_fd1_0_c0_c0_c0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor2);
  }

  .detail_fd1_0_c0_c0_c0_c1_c0 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .detail_fd1_0_c0_c0_c0_c0 {
    width: 88rpx;
    height: 88rpx;
    border-radius: 100rpx;
    margin: 0rpx 28rpx 0rpx 0rpx;
  }

  .detail_fd1_0 {
    width: 702rpx;
    margin: 24rpx auto 32rpx auto;
  }

  .detail_flex_2 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .detail_fd2_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(23, 107, 232, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .detail_fd2_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .detail_fd2_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd2_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .detail_fd2_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .detail_flex_3 {
    background: var(--benbenbgColor1);
    margin: 16rpx 0rpx 0rpx 0rpx;
    padding: 24rpx;
    background-size: 100% auto;
  }

  .detail_fd3_1_c0_c2 {
    font-size: 32rpx;
    color: rgba(255, 72, 59, 1);
  }

  .detail_fd3_1_c0_c1 {
    margin: 16rpx 0rpx 16rpx 0rpx;
    max-width: 200rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 24rpx;
  }

  .detail_fd3_1_c0_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
  }

  .detail_fd3_1_c0 {
    width: 200rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .detail_fd3_1 {
    touch-action: none;
    max-width: 702rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
    width: 702rpx;
  }

  .detail_fd3_0 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .detail_flex_4 {
    background: #FFF;
    margin: 16rpx 0rpx 0rpx 0rpx;
    padding: 24rpx 24rpx 0 24rpx;
    background-size: 100% auto;
  }

  .detail_fd4_1 {
    background: #F5F4F9;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    line-height: 72rpx;
    height: 72rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 32rpx 0rpx 16rpx 0rpx;
  }

  .detail_fd4_0 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .detail_flex_5 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 40rpx 0rpx 45rpx 0rpx;
  }

  .detail_fd5_3_c1 {
    font-size: 24rpx;
    color: var(--benbenFontColor2);
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd5_3_c0 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 168rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    color: #fff;
    height: 56rpx;
  }

  .detail_fd5_3 {
    margin: 16rpx 0rpx 16rpx 0rpx;
    padding: 16rpx;
  }

  .detail_fd5_1_c1_c0 {
    width: 36rpx;
    height: 36rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd5_1_c0 {
    color: var(--benbenFontColor0);
  }

  .detail_fd5_1 {
    line-height: 88rpx;
    color: var(--benbenFontColor2);
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .detail_fd5_0_c0 {
    font-size: 32rpx;
  }

  .detail_fd5_0 {
    line-height: 88rpx;
  }

  .detail_flex_6 {
    background: #FFF;
    background-size: 100% auto !important;
    padding: 0rpx 32rpx 150rpx 32rpx;
  }

  .detail_fd6_0_c0_c1_c3 {
    color: var(--benbenFontColor4);
    font-size: 20rpx;
    font-weight: 400;
    line-height: 24rpx;
    margin: 24rpx 0rpx 0rpx 85rpx;
  }

  .detail_fd6_0_c0_c1_c2_c1_c0 {
    margin: 0rpx 0rpx 16rpx 0rpx;
  }

  .detail_fd6_0_c0_c1_c2_c0 {
    width: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .detail_fd6_0_c0_c1_c2 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd6_0_c0_c1_c1_c0_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 16rpx;
  }

  .detail_fd6_0_c0_c1_c1_c0_c0 {
    font-size: 24rpx;
    font-weight: 400;
    color: #333;
  }

  .detail_fd6_0_c0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .detail_fd6_0_c0_c1_c0_c1 {
    color: rgba(23, 107, 232, 1);
  }

  .detail_fd6_0_c0_c1_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
  }

  .detail_fd6_0_c0_c0 {
    width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .detail_fd6_0_c0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .detail_flex_7 {
    background: rgba(255, 255, 255, 1);
    padding: 24rpx 24rpx 24rpx 24rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .detail_input_fd7_1 {
    width: 100%;
    height: 1086rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    padding: 24rpx 24rpx 24rpx 24rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .detail_fd7_1 {
    background: #F8F8F8;
    width: 702rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    height: 300rpx;
  }

  .detail_fd7_0_c1 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    width: 122rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #fff;
    height: 60rpx;
  }

  .detail_fd7_0 {
    margin: 24rpx 0rpx 24rpx 0rpx;
  }

  .detail_flex_8 {
    border-top: 1px solid #eee;
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 120rpx;
    overflow: hidden;
    padding: 0 32rpx;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    background-size: 100% auto;
  }

  .detail_fd8_2_c1 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    width: 170rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #fff;
    height: 60rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .detail_fd8_2_c0 {
    background: #F8F8F8;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    width: 170rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor0);
    height: 60rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .detail_fd8_1 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    width: 170rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    height: 60rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .detail_fd8_0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .detail_fd8_0 {
    margin: 0rpx 0rpx 0rpx 32rpx;
    width: 150rpx;
  }
</style>
